<script>
export default {
    data() {
        return {
            value:'',
            pname:'',
            cname:'',
            xname:'',
            poiValue:'',
            poisArr:[],
            isShow: this.poiValue===''?true:false
        }
    },
    methods:{
      bindPickerChange (e){
      console.log(e.detail.value)
            this.poiValue = e.detail.value.join(',')
    },

    //选择地址
    selectAddress(item){
      this.poiValue=item.district +','+ item.name
      this.isShow = true
    },
    
    //点击确定
    getOk(){
      //非空校验
      if(this.poiValue.trim()=='') return uni.switchTab({ url: '/pages/index/index' })
      //本地存储
      uni.setStorageSync('map',this.poiValue)
      //跳转主页
      uni.switchTab({ url: '/pages/index/index' })
      console.log(uni.getStorageSync('map'));
    },

    async fetchDistrictData () {
      this.pname=''
      this.cname=''
      this.xname=''
      const apiKey = '020d75b8d85b7d712b77a65cf9256d2a'; // 替换为您的API密钥
        const response = await uni.request({
          url: `https://restapi.amap.com/v3/ip?key=${apiKey}`,
          method: 'GET'
        });
        console.log(response);
        this.poiValue = response.data.province + ',' + response.data.city
    },
     async getpoi(){
      this.isShow = false
        const apiKey = '020d75b8d85b7d712b77a65cf9256d2a';
        const res = await uni.request({
          url: `https://restapi.amap.com/v3/assistant/inputtips?key=${apiKey}&keywords=${this.poiValue}`,
          method: 'GET'
        });
        console.log(res);
        // this.poisArr = res.data.pois
        this.poisArr = res.data.tips
      }    
    }
  }
</script>
<template>
  <view class="map">
    <view class="uni-form-item uni-column">
				<input @input="getpoi()" v-model="poiValue" class="uni-input" focus placeholder="搜索位置" />
        <view class="input-item" v-if="poiValue.trim()!=''&&isShow === false">
          <p @click="selectAddress(item)" v-for="item,index in poisArr" :key="index">{{ item.district }}<span>{{ item.name }}</span></p>
        </view>
			</view>
   <view class="uni-title uni-common-pl">请选择地区</view>
   <view @click="fetchDistrictData()">定位</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-db">
					<picker style="display: inline-block;" mode = region @change="bindPickerChange" :value="value" :range="array">
						<view class="uni-inputt" style="margin:35rpx,30rpx;">点击选择省市区</view>
					</picker>
          <!-- <view class="uni-list-cell-left">
					{{pname!=''||cname!=''&&poiValue.trim()==''?pname+cname+xname:poiValue }}
				</view> -->
				</view>
        
			</view>
      <button class="btn" @click="getOk()">确定</button>
    </view>
  </view>
</template>
    <style>
    .map{
      width: 100%;
      height: 500rpx;
      overflow: hidden;
      
    }
    /* .uni-list-cell-db{
      display: flex;
      justify-content: center;
    } */
    .uni-list-cell-left{
          display: inline-block;
          line-height: 100%;
          font-size: 30rpx;
          color: rgb(22, 22, 22);
        }
        .uni-inputt{
          display: inline-block;
          width: 300rpx;
          height: 55rpx;
          background: linear-gradient(#e4fcff,#c4deff,#c0efff);
          border-radius: 30rpx;
          font-size: 30rpx;
          color: rgb(22, 22, 22);
          text-align: center;
          line-height: 55rpx;
          margin: 30rpx;
        }
        .uni-title{
        font-size: 30rpx;
        margin-left: 310rpx;
        margin-top: 30rpx;
        margin-bottom: 30rpx;
        
        
      }
      .input-item{
        background-color: pink;
      }
</style>